<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>21点小游戏</title>
	<link rel="icon" href="https://cn.vuejs.org/logo.svg">
	<link rel="stylesheet" href="index.css">
	<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
	<script src="js/vue3.js"></script>
</head>

<body>
	<div id="view">
		<!--index.wxml-->
		<div class="box">
			<div class="card">
				<!-- 庄家手牌 -->
				<div class="card-image">
					<img v-if="!started" :src="disCard.imageUrl" />
					<div class="back-img">
						<img v-if="started" v-for="item,index in makers" :src="disCard.imageUrl" class="back-image"
							:style="ended && index == 0 ? 'animation: r 1s linear;' : 'z-index:-999;'" />
					</div>
					<!--  -->
					<div class="prev-img">
						<img v-if="started" v-for="item,index in makers"
							:src="index == 0 && !ended ? disCard.imageUrl : item.imageUrl"
							:class="ended && index == 0 ? 'animation' : ''"
							:style="ended && index == 0 ? 'animation: r2 1s linear;' : ''"></img>
					</div>
				</div>
			</div>
			<!-- 按钮组 -->
			<div class="button">
				<div class="card-btn">
					<div class="start-btn">
						<button class="btn" :disabled="started && !ended"
							@click="start">{{started ? '重新开始' : '开始发牌'}}</button>
						<button class="btn" v-if="started" :disabled="started && !ended" @click="con">继续游戏</button>
					</div>
					<div class="fun-btn">
						<button class="btn" :disabled="ended" v-if="started" @click="add">加牌</button>
						<button class="btn" :disabled="ended" v-if="started" @click="lose">认输</button>
						<button class="btn" :disabled="ended" v-if="started" @click="end">结束</button>
					</div>
				</div>
			</div>
			<div class="base-box" v-if="started">基础场：当前底分{{baseScore}}
				<span class="odds">赔率：完善中...{{}}</span>
			</div>
			<!-- 闲家手牌 -->
			<div class="card">
				<div class="card-image" v-if="started">
					<img v-for="item in freeCard" :src="item.imageUrl"></img>
				</div>
			</div>
			<div class="player-infomation" v-if="freeTotal">
				<div class="total">合计：{{freeTotal}}</div>
				<div class="balance">
					<img src="images/numbers/coins.png" />
					<p>余额：{{balance}}</p>
					<img src="images/numbers/recharge.png" @click="recharge" />
				</div>
			</div>
			<!-- 牌局信息 -->
			<div class="bet-btn button" v-if="started">
				<p class="bet-text">下注：</p>
				<div class="bet-image bet" v-for="item in betButtons" @click="bet(item.times)">
					<img :src="'images/numbers/chip' + item.times +'.png'" />
				</div>
			</div>
			<div class="info">
				<div class="remainder" v-if="started">剩余牌数：{{len}}</div>
				<div class="result" v-if="result">{{result}}</div>
			</div>

			<!-- 比分 -->
			<div class="score" v-if="started">
				<div class="score-title">
					<p class="rate">胜率{{winRate}}%</p>
				</div>
				<div class="player-info">
					<div class="player">总场次</div>
					<div class="player">胜场</div>
				</div>
				<div class="score-info">
					<div class="sc">
						<img class="img" src="images/numbers/pm03.png" />
						{{session}}场
					</div>
					<div class="sc">
						<img class="img" src="images/numbers/pm01.jpg" />
						{{victory}}场
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		const app = Vue.createApp({
			data() {
				return {
					ended: false,
					started: false,
					continue: true,
					result: '',
					freeCard: [],
					makers: [],
					cards: [],
					freeTotal: 0,
					makersTotal: 0,
					len: 52,
					session: 0,
					victory: 0,
					winRate: 100,
					balance: 1000,
					baseScore: 1,
					money: 0,
					disCard: {
						imageUrl: 'images/cards/back.png'
					},
					betButtons: []
				}
			},
			methods: {
				// 开始发牌
				start() {
					this.initData()
					this.con()
				},
				// 继续游戏不重新洗牌
				con() {
					if (this.balance < 1) {
						// wx.showModal({
						// 	title: '警告',
						// 	content: '账户余额不足，请充值。',
						// 	success(res) {
						// 		if (res.confirm) {
						// 			wx.redirectTo({
						// 				url: '/pages/recharge/index?balance=' + this.data
						// 					.balance,
						// 			})
						// 			return
						// 		} else if (res.cancel) {
						// 			// TODO 退出游戏
						// 			this.started = false
						// 			this.ended = false
						// 		}
						// 	}
						// })
					} else {
						if (this.len < 4) {
							this.checkCards();
						} else {
							this.getCards();
						}
					}
				},
				// 获取手牌
				getCards() {
					let cards = this.cards
					let freeCard = [] // 闲家牌
					freeCard.push(cards.pop(), cards.pop())
					let makers = [] // 庄家牌
					makers.push(cards.pop(), cards.pop())
					this.baseScore = 1;
					this.len = this.cards.length;
					this.ended = false;
					this.result = '';
					this.started = true;
					this.freeCard = freeCard;
					this.makers = makers;
					this.freeTotal = this.getTotal(freeCard);
					this.makersTotal = this.getTotal(makers)
				},
				// 检查剩余牌数量
				checkCards() {
					if (window.alert("剩余牌数不足4，是否重新开始洗牌？")) {
						this.initData()
						this.getCards()
					}
				},
				// 添加牌
				add() {
					if (this.freeTotal == 21) {
						if (window.alert("笨蛋！")) {
							if (this.len < 1) {
								this.checkCards()
							} else {
								this.getFree()
							}
						}
					}
				},
				// 获取闲家手牌
				getFree() {
					let freeCard = this.freeCard // 闲家牌
					freeCard.push(this.cards.pop())
					this.len = this.cards.length
					this.freeCard = freeCard
					this.freeTota = this.getTotal(freeCard)
				},
				// 结束，比较庄家和闲家的点数
				end() {
					// 闲家点结束  庄家比较自己的牌，决定是否加牌 系统自动完成
					this.getMarkers();
					const freeTotal = this.freeTotal
					const makersTotal = this.makersTotal
					// 牌面小于21 并且大于庄家牌面/庄家牌面大于21
					const flag = freeTotal <= 21 && (freeTotal > makersTotal || makersTotal > 21);
					// wx.showToast({
					// 	title: flag ? '恭喜你，你赢了！' : '输只是暂时的！',
					// 	icon: flag ? 'success' : 'error'
					// })
					this.ended = true
					window.alert(flag ? '恭喜你，你赢了！' : '输只是暂时的！')
					let balance = this.balance
					let freeScore = this.freeScore
					if (flag && freeTotal == 21) {
						balance += 2 * this.baseScore
					} else if (flag) {
						balance += this.baseScore
					} else {
						balance -= this.baseScore
					}
					this.result = flag ? '闲家胜！' : '庄家胜！'
					this.session = this.session + 1
					this.victory = flag ? this.victory + 1 : this.victory
					this.balance = balance
					const winRate = Math.floor((parseInt(this.victory) / parseInt(this.session)) * 100);
					this.winRate = winRate
				},
				// 庄家获取牌
				getMarkers() {
					let makersTotal = this.makersTotal
					// 庄家能看到闲家的牌面总和
					let fc = [...this.freeCard]
					const freeCanSeeTotal = this.getTotal(fc.splice(1))
					let makers = this.makers
					while ((makersTotal < 16 || makersTotal < freeCanSeeTotal && freeCanSeeTotal < 21) && this
						.len > 0) {
						makers.push(this.cards.pop())
						this.makers = makers
						makersTotal = this.getTotal(makers)
					}
					this.makersTotal = makersTotal
					this.len = this.cards.length
				},
				// 认输
				lose() {
					const freeTotal = this.freeTotal
					const makersTotal = this.makersTotal
					const flag = freeTotal <= 21 && freeTotal > makersTotal || makersTotal > 21
					// wx.showToast({
					// 	title: flag ? '你应该多坚持的！' : '输只是暂时的',
					// 	icon: 'error'
					// })
					window.alert(flag ? '你应该多坚持的！' : '输只是暂时的')
					result: '庄家胜！'
					this.session = this.session + 1
					this.ended = true
					this.balance = this.balance - this.baseScore
					const winRate = Math.floor((parseInt(this.victory) / parseInt(this.session)) * 100);
					this.winRate = winRate;
				},
				// 下注
				bet(e) {
					// const times = e.currentTarget.dataset.times;
					if (!this.ended) {
						this.baseScore = this.baseScore * e
					}
				},
				// 计算牌面总和
				getTotal(arr) {
					let total = 0;
					let codes = [];
					arr.forEach(a => codes.push(a.code > 10 ? 10 : a.code))
					for (let i = 0; i < codes.length; i++) {
						let code = parseInt(codes[i])
						if (code == 1 && total < 21) {
							total += 11;
							codes.splice(i, 1, 11);
						} else {
							total += code > 10 ? 10 : code
						}
					}
					while (total > 21 && codes.indexOf(11) > -1) {
						total = total - 10
						codes.splice(codes.indexOf(11), 1, 1)
					}
					return total
				},
				// 洗牌
				getCard() {
					let cards = [];
					for (let i = 1; i <= 13; i++) {
						cards.push({
							code: i,
							name: '红心' + i,
							imageUrl: 'images/cards/' + i + 'x.png'
						})
						cards.push({
							code: i,
							name: '梅花' + i,
							imageUrl: 'images/cards/' + i + 'h.png'
						})
						cards.push({
							code: i,
							name: '黑桃' + i,
							imageUrl: 'images/cards/' + i + 't.png'
						})
						cards.push({
							code: i,
							name: '方块' + i,
							imageUrl: 'images/cards/' + i + 'k.png'
						})
					}
					cards.sort(function () {
						return 0.5 - Math.random()
					})
					return cards;
				},
				// 充值
				recharge() {
					// wx.redirectTo({
					// 	url: '/pages/recharge/index?balance=' + this.data.balance,
					// })
				},
				// 初始化玩家手牌
				initData() {
					this.cards = this.getCard()
					this.freeCard = [];
					this.makers = [];
					this.freeTotal = 0;
					this.makersTotal = 0;
					this.ended = false;
					this.result = '';
					this.markerScore = this.started ? this.markerScore : 0;
					this.freeScore = this.started ? this.freeScore : 0;
					this.session = 0;
					this.victory = 0;
					this.winRate = 100;
				}
			},
			mounted() {
				const betButtons = [{
						color: '#4491c5',
						text: 'x10',
						times: 10
					},
					{
						color: '#ba328d',
						text: 'x20',
						times: 20
					},
					{
						color: '#74ab4d',
						text: 'x30',
						times: 50
					},
					{
						color: '#cf3835',
						text: 'x50',
						times: 100
					},
				];
				this.betButtons = betButtons;
				this.getCard()
			}
		})
		app.mount("#view")
	</script>
</body>

</html>